button {
  &::after {
    display: none;
  }
}
.no-scroll {
  overflow: hidden;
}
.clearfix:after,
.clearfix:before {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
.content {
  width: 100%;
  // height: 100vh;
  .head {
    min-height: 485rpx;
    position: relative;
    background-color: #f7f7f7;

    .head-bg {
      width: 100%;
      height: 296rpx;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }

    .head-content {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      width: calc(100% - 90rpx);
      background: #ffffff;
      border-radius: 8rpx;
      padding: 30rpx 25rpx;

      .top {
        display: flex;
        justify-content: space-between;

        .icon {
          width: 120rpx;
          height: 120rpx;
          border-radius: 15rpx;
          margin-right: 15px;
          overflow: hidden;
        }

        .msg {
          flex: 1;
          padding: 15rpx 0;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 0;

          .title {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #131313;
          }

          .desc {
            display: flex;
            font-size: 27rpx;
            color: #888888;

            .falg {
              font-size: 22rpx;
              opacity: 0.6;
              height: 30rpx;
              border: 1px solid #888888;
              padding: 0 13rpx;
              border-radius: 15rpx;
              margin-right: 10rpx;
            }

            .open {
              color: var(--theme-color);
              border-color: var(--theme-color);
              opacity: 1;
            }
          }
        }

        .btn {
          font-size: 29rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: var(--theme-color);
          padding-top: 20rpx;
        }
      }

      .bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 35rpx;

        > view:last-child::after {
          display: none;
        }

                button {
                    background-color: #fff !important;
                    line-height: normal;
                    padding: 0 !important;
                }

                .btn {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    font-size: 28rpx;
                    font-weight: 500;
                    color: #181818;
                    position: relative;

                    .icon {
                        // width: 35rpx;
                        // height: 40rpx;
                        margin-bottom: 15rpx;
                        font-size: 28px;
                        color: var(--theme-color);
                    }

                    &::after {
                        position: absolute;
                        width: 1px;
                        height: 30rpx;
                        background: #dddddd;
                        content: "";
                        right: 0;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                }
            }
        }
    }

  .list {
    width: 100%;
    padding: 0;
    background-color: #f7f7f7;
    .list-head {
      width: calc(100% - 50rpx);
      display: flex;
      padding: 20rpx 25rpx;
      justify-content: space-between;
      background-color: #f7f7f7;
      .right {
        display: flex;
        font-size: 29rpx;
        font-weight: 500;
        color: #131313;
        align-items: center;

        .text {
          position: relative;
          padding: 0 0 13rpx;
          margin-right: 60rpx;
        }

        .active {
          font-size: 32rpx;
          font-weight: bold;

          &::after {
            position: absolute;
            bottom: 0;
            left: 0;
            content: "";
            width: 100%;
            height: 6rpx;
            background: var(--theme-color);
            border-radius: 3rpx;
          }
        }
      }

      .left {
        width: 144rpx;
        height: 60rpx;
        background: #ffffff;
        box-shadow: 0px 0px 4px 0px rgba(34, 34, 34, 0.14);
        border-radius: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 29rpx;
      }
    }

    .list-content {
      display: flex;

      // position: relative;
      .left {
        width: 165rpx;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #181818;
        background-color: #f7f7f7;

                .text {
                    display: flex;
                    align-items: center;
                    position: relative;
                    min-height: 30rpx;
                    padding: 30rpx;
                    padding-right: 0 !important;
                    .text-content {
                        font-size: 30rpx;
                      .falg {
                        min-width: 26rpx;
                        padding: 2rpx;
                        height: 26rpx;
                        border-radius: 26rpx;
                        background: #fe7316;
                        font-size: 20rpx;
                        font-family: PingFang SC;
                        font-weight: bold;
                        color: #ffffff;
                        position: absolute;
                        right: 5rpx;
                        top: 10rpx;
                        text-align: center;
                        line-height: 26rpx;
                      }
                      .falgMax {
                        padding: 2rpx 10rpx;
                      }
                    }
                }

                .active {
                    color: #ffffff;
                    background: var(--theme-color);
                }
            }

            .right {
                // flex: 1;
                background: #fff;
                width: calc(100% - 215rpx);
                padding: 0px 25rpx 50px;
                .class-ify {
                    padding-top: 30rpx;
                    .classify-title {
                        font-size: 28rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #131313;
                        // margin-top: 30rpx;
                        // height: 55rpx;
                        // line-height: 55px;
                    }
                }
            }
        }
        .no_more{
            padding:20rpx 0;
            text-align: center;
            font-size: 27rpx;
            color:#888888;
        }


    }

  .fixed {
    width: 100%;
    left: 0;
    z-index: 111;
    position: fixed;
  }

  .placeholder_list {
    height: 100vh;
  }
}

.ticket {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 40rpx);
  margin: 0 auto;
  margin-top: 24rpx;

  .ticket_list {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;

    .ticket_item {
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
      position: relative;
      z-index: 5;
      display: inline-block;
      align-items: center;
      height: 50rpx;
      background: linear-gradient(-90deg, #daa629, #ebbc64);
      padding-left: 15rpx;
      border-radius: 10rpx;
      overflow: hidden;
      margin-right: 20rpx;

      .discount {
        display: inline-block;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ffffff;
        margin-right: 15rpx;
      }

      .rule {
        display: inline-block;
        position: relative;
        margin-right: 15rpx;

        .round_top {
          position: absolute;
          height: 8rpx;
          width: 8rpx;
          background-color: #ffffff;
          top: -18rpx;
          right: -18rpx;
          border-radius: 50%;
        }

        .round_bottom {
          position: absolute;
          height: 8rpx;
          width: 8rpx;
          background-color: #ffffff;
          bottom: -16rpx;
          right: -18rpx;
          border-radius: 50%;
        }
      }

      .get {
        &.took {
          background: #e9d7aa;
        }

        display: inline-block;
        line-height: 50rpx;
        padding: 0 15rpx;
      }
    }
  }

  .see_all {
    white-space: nowrap;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: var(--theme-color);
  }
}

.no_touch {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 29rpx;
  color: #fff;

  .icon {
    margin-bottom: 20rpx;
  }

  .content {
    width: 200rpx;
    height: 200rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #181818;
    border-radius: 15rpx;
  }
}
